<template>
	<div style="float: right;z-index: 999999;text-align: right;line-height: 40px;padding-right: 20px;">
		<el-button type="success" size="small" @click="to_print">打印</el-button>
		<el-button type="primary" size="small" @click="setTemplate">保存</el-button>
		<el-button type="danger" size="small" @click="downExcelData">导出</el-button>
	</div>
	<div id="luckysheet">
	</div>
	<printDialog v-if="dialog.print" ref="printDialog" @closed="printClose"></printDialog>
</template>
<script>
import printDialog from './print'
export default {
	emits: ['success', 'closed'],
	components: {
		printDialog
	},
	data() {
		return {
			dialog:{
				print:false
			},
			sheetData:[],
			title:'',
			manageId: this.$route.query.manageId,
			form: {
				manageId: '',
			},
		}
	},
	mounted() {
		this.getExcelManageTemplateById();
	},
	methods: {
		printClose()
		{
			location. reload();
		},
		async getExcelManageTemplateById() {
			var res = await this.$API.bi.excel.getExcelManageTemplateById.get({manageId: this.manageId});
			if (res.code == 200) {
				this.sheetData = res.data.sheetData;
				this.title = res.data.title+"[模版]";
				window.luckysheet.create({
					container: 'luckysheet',
					title: this.title,
					lang: 'zh',
					allowEdit: true,
					//plugins: ['chart'],
					forceCalculation: false,
					showsheetbarConfig: {
						add: false,
					},
					data: this.sheetData
				})
				document.querySelector('.luckysheet_info_detail_back').remove();
			} else {
				this.$alert(res.message, "提示", {type: 'error'})
			}
		},
		to_print() {
			const html = window.luckysheet.getRangeHtml();
			document.querySelector('#luckysheet').style.display = 'none';
			this.dialog.print = true
			this.$nextTick(() => {
				this.$refs.printDialog.open().setData(html)
			})
		},
		downExcelData() {
			this.$API.bi.excel.downExcelTemplate.fileDownload({manageId:this.manageId});
		},
		async setTemplate() {
			var dataJson = window.luckysheet.getAllSheets();
			var res = await this.$API.bi.excel.updateBiExcelManage.post({manageId: this.manageId, excelTemplate: JSON.stringify(dataJson)});
			if (res.code == 200) {
				this.$emit('success')
				this.visible = false;
				this.$message.success("操作成功")
			} else {
				this.$alert(res.message, "提示", {type: 'error'})
			}
		},
	}
}
</script>

<style scoped>
.customWidth {
	width: 60%;
}

#luckysheet {
	margin: 0px;
	padding: 0px;
	position: absolute;
	width: 100%;
	left: 0px;
	top: 0px;
	bottom: 0px;
}

#uploadBtn {
	font-size: 16px;
}

#tip {
	position: absolute;
	z-index: 1000000;
	left: 0px;
	top: 0px;
	bottom: 0px;
	right: 0px;
	background: rgba(255, 255, 255, 0.8);
	text-align: center;
	font-size: 40px;
	align-items: center;
	justify-content: center;
	display: flex;
}
</style>
